<template>

  <el-row>
    <el-col :span="14" class="col-container">
    </el-col>
    <el-col :span="8" class="col-container">
      <!-- 添加角色按钮 -->
      <el-button type="primary" @click="openAddDialog"><el-icon>
          <Plus />
        </el-icon>添加角色</el-button>
    </el-col>
    <el-col :span="2">
    </el-col>
  </el-row>


  <!-- 角色列表 -->
  <el-table :data="roles" style="margin-top: 20px" border>
    <el-table-column prop="name" label="角色名称" width="200" />
    <el-table-column prop="remark" label="备注" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button plain size="small" type="primary" @click="openEditDialog(scope.row.id)"><el-icon>
            <Edit />
          </el-icon>编辑</el-button>
        <el-button plain size="small" type="danger" @click="deleteRole(scope.row.id)"><el-icon>
            <Delete />
          </el-icon>删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加/编辑角色对话框 -->
  <el-dialog v-model="dialogVisible" :title="isEditing ? '编辑角色' : '添加角色'" width="40%">
    <el-form :model="form" label-width="100px" :rules="rules" ref="roleForm">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '@/utils/request.js'

// 角色列表数据
const roles = reactive([])

// 表单数据
const form = reactive({
  id: null,
  name: '',
  remark: ''
})

// 对话框状态 
const dialogVisible = ref(false)
const isEditing = ref(false)

// 校验规则
const rules = reactive({
  name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
  remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
})

// 模拟加载角色列表数据
onMounted(() => {
  // roles.value = [
  //   { id: 1, name: '管理员', remark: '系统管理员角色' },
  //   { id: 2, name: '用户', remark: '普通用户角色' }
  // ]
  getAllInfos()
})

// 打开添加角色对话框
const openAddDialog = () => {
  isEditing.value = false
  Object.assign(form, { id: null, name: '', remark: '' })
  dialogVisible.value = true
}

// 打开编辑角色对话框
const openEditDialog = (id) => {
  isEditing.value = true
  //使用axios查询角色信息
  axios(
    {
      url: '/rolem/getInfoById.do',
      method: 'post',
      params: {
        id: id
      },
    }).then((res) => {

      form.id = res.id
      form.name = res.name
      form.remark = res.remark

      dialogVisible.value = true
    }).catch((error) => {
      ElMessage.error('网络请求失败，请检查网络是否畅通!');
    })


}

// 提交表单
const submitForm = () => {
  if (!form.name || !form.remark) {
    ElMessage.error('请填写完整信息')
    return
  }

  if (isEditing.value) {
    // 使用axios实现编辑角色
    axios(
      {
        url: '/rolem/updateInfo.do',
        method: 'post',
        params: {
          id: form.id,
          name: form.name,
          remark: form.remark
        },
      }).then((res) => {
        if (res.result == 'success') {
          ElMessage.success('角色编辑成功')
          dialogVisible.value = false
          getAllInfos()
        }
      }).catch((error) => {
        ElMessage.error('网络请求失败，请检查网络是否畅通!');
      })

  } else {
    // 使用axios实现添加角色
    axios(
      {
        url: '/rolem/saveInfo.do',
        method: 'post',
        params: {
          name: form.name,
          remark: form.remark
        },
      }).then((res) => {
        if (res.result == 'success') {
          ElMessage.success('保存成功!');
          dialogVisible.value = false
          getAllInfos()
        } else {
          ElMessage.error('保存失败，请检查数据是否正确!');
        }
      }).catch((error) => {
        ElMessage.error('网络请求失败，请检查网络是否畅通!');
      })
  }

}

// 删除角色
const deleteRole = (id) => {
  ElMessageBox.confirm('确定要删除该角色吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //使用axios删除角色
    axios(
      {
        url: '/rolem/deleteInfo.do',
        method: 'post',
        params: {
          id: id
        },
      }).then((res) => {
        if (res.result == 'success') {
          ElMessage.success('删除成功!');
          getAllInfos()
        } else {
          ElMessage.error('删除失败，请检查数据是否正确!');
        }
      }).catch((error) => {
        ElMessage.error('网络请求失败，请检查网络是否畅通!');
      })

  }).catch(() => { })
}
//获取所有角色信息
const getAllInfos = () => {
  axios(
    {
      url: '/rolem/getAllInfos.do',
      method: 'post',
      params: {
      },
    }).then((res) => {
      // alert(JSON.stringify(res))
      roles.splice(0, roles.length, ...res)
    }).catch((error) => {
      ElMessage.error('网络请求失败，请检查网络是否畅通!');
      //  ElMessage.warning('请检查服务器是否开启!');
      //  ElMessage.success('请检查数据库是否连接!');
    })


}
</script>

<style scoped>
.role-management {
  padding: 20px;
}

.el-row {
  margin-top: 0rem;
  height: 60px;
  padding: 0cm;
  margin-bottom: 0
}

.col-container {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: flex-end;
  /* 水平靠右 */
  height: 60px;
  padding: 0px;
  /* 添加内边距 */
}
</style>